<template>
  <div>
    <el-row :gutter="16">
      <el-col :span="8">
        <div class="statistic-card">
          <el-statistic :value="total">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                注册用户数量
                <el-tooltip
                  effect="dark"
                  content="Number of users who logged into the product in one day"
                  placement="top"
                >
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>than yesterday</span>
              <span class="green">
                24%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="statistic-card">
          <el-statistic :value="300">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                月访问量
                <el-tooltip
                  effect="dark"
                  content="Number of users who logged into the product in one month"
                  placement="top"
                >
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>month on month</span>
              <span class="red">
                12%
                <el-icon>
                  <CaretBottom />
                </el-icon>
              </span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="statistic-card">
          <el-statistic :value="100" title="New transactions today">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                日访问量
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>than yesterday</span>
              <span class="green">
                16%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
            </div>
            <div class="footer-item">
              <el-icon :size="14">
                <ArrowRight />
              </el-icon>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <div class="echarts-box" v-if="isShow">
    <div class="one">
      <p>男女比例</p>
      <div id="myEcharts" :style="{ width: '500px', height: '300px' }"></div>
    </div>
    <div class="one">
      <p>待审核</p>
      <div id="myEcharts1" :style="{ width: '500px', height: '300px' }"></div>
    </div>
  </div>
</template>
  
  <script setup>
import { onMounted, onUnmounted, ref } from "vue";
import {
  ArrowRight,
  CaretBottom,
  CaretTop,
  Warning,
} from "@element-plus/icons-vue";
import * as echarts from "echarts";
import { getAll } from "@/require/index.js";
let echart = echarts;
let { data } = await getAll({
  pageNum: 1,
  pageSize: 1000,
  username: "",
});
let total = data.data.total;
let manArr = 0;
let woman = 0;
let yesAccess = 0;
let noAccess = 0;
let isShow = ref(true);
const doData = () => {
  data.data.records.forEach((ele, index) => {
    if (ele.sex == "男") {
      manArr++;
    } else {
      woman++;
    }

    if (ele.state == 1) {
      yesAccess++;
    } else {
      noAccess++;
    }
  });
};
doData();
function initChart(a, b) {
  let chart = echart.init(document.getElementById("myEcharts"));
  // 把配置和数据放这里
  chart.setOption({
    series: [
      {
        type: "pie",
        data: [
          {
            value: a,
            name: "女",
          },
          {
            value: b,
            name: "男",
          },
        ],
      },
    ],
  });
  window.onresize = function () {
    //自适应大小
    chart.resize();
  };
}
function initChart1(a, b) {
  let chart = echart.init(document.getElementById("myEcharts1"));
  // 把配置和数据放这里
  chart.setOption({
    series: [
      {
        type: "pie",
        data: [
          {
            value: a,
            name: "审核通过",
          },
          {
            value: b,
            name: "未通过",
          },
        ],
      },
    ],
  });
  window.onresize = function () {
    //自适应大小
    chart.resize();
  };
}
onMounted(() => {
  let myChart = echart.getInstanceByDom(document.getElementById("myEcharts1"));
  //如果为空 则正常进行渲染 反之 不再进行初始化
  if (myChart == null) {
    initChart(manArr, woman);
    initChart1(yesAccess, noAccess);
  }
});
onUnmounted(() => {
  isShow.value = false;
  echart.dispose;
});
</script>
  
  <style scoped lang="less">
:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
.echarts-box {
  margin-top: 100px;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  .one {
    width: 500px;
    p {
      width: 100%;
      text-align: center;
    }
  }
}
</style>
  